<template>
  <div class="wraper" height="fill">
    <div class="top-box">
      <div class="left-box card-box">
        <div class="undline">医院数据</div>
        <div class="search-box" style="flex-direction: column">
          <FilterForm
            ref="gxForm"
            :elements="hospitalElement"
            @submit="handleHospitalSearch"
            @reset="handleHospitalReset"
          >
            <Button type="plain" :btn-loading="gxLoading" @click="handleUpdataData">更新数据</Button>
          </FilterForm>
        </div>
        <div class="table-box">
          <Table
            :selection="true"
            :columns="tableLColumns"
            :loading="tableLLoading"
            :data="tableLData"
            :pagination="{
              total: total,
              current: currentPage,
              pageSize: pageSize,
            }"
            @paginationChange="handleYyPagination"
            @rowSelection="handleSelection"
          />
        </div>
      </div>
      <div class="middle-box">
        <div class="m-btn">
          <Button icon="icon-a-ziyuan3" :btn-loading="qrLoading" @click="handleDealExcel()">确认对照</Button>
        </div>
      </div>
      <div class="right-box card-box">
        <div class="undline">系统数据</div>
        <div class="search-box" style="flex-direction: column">
          <FilterForm
            ref="filterForm"
            :elements="SystermElement"
            @submit="handleSystermSearch"
            @reset="handleSystermReset"
          />
        </div>
        <div class="table-box systerm-box">
          <Table
            ref="systermRef"
            :selection="true"
            :columns="tableRColumns"
            :loading="tableRLoading"
            :data="tableRData"
            :pagination="{
              total: totalR,
              current: currentRPage,
              pageSize: pageRSize,
            }"
            @paginationChange="pageSystermChange"
            @rowSelect="handleSystermSelection"
          />
        </div>
      </div>
    </div>
    <div class="bottom-box card-box">
      <div class="search-box">
        <FilterForm
          ref="filterForm"
          :elements="comparisonElement"
          @submit="handleComparisonSearch"
          @reset="handleComparisonReset"
        />
      </div>
      <div class="table-box">
        <Table
          :columns="tableBtmColumns"
          :loading="tableBtmLoading"
          :data="tableBtmData"
          :pagination="{
            total: totalBtm,
            current: currentBtmPage,
            pageSize: pageBtmSize,
          }"
          @paginationChange="pageChange"
        >
          <template #caozuo="{ row }">
            <Tooltip content="撤销" icon="icon-xinxiduizhao" @click="handleRevoke(row)" />
          </template>
        </Table>
      </div>
    </div>
  </div>
</template>

<script>
// import {
//   listHospitalItemPage,
//   listSystemItemPage,
//   listItemContrastPage,
//   confirmControl,
//   withdrawContrast,
//   updateData
// } from '@/api/baseSet'
export default {
  name: 'ProjectComparsion', // 数据对照-项目对照
  components: {},
  props: {},
  data() {
    return {
      qrLoading: false,
      comparisonElement: [
        {
          label: '',
          type: 'input',
          key: 'name',
          placeholder: '请输入名称',
          value: ''
        }
      ],
      SystermElement: [
        {
          label: '',
          type: 'input',
          key: 'name',
          placeholder: '请输入名称',
          value: ''
        }
      ],
      hospitalElement: [
        {
          key: 'dataSource',
          label: '数据来源',
          type: 'select',
          hideSelectAll: true,
          options: [
            {
              label: 'HIS收费项目',
              value: '1'
            },
            {
              label: 'HIS医嘱项目',
              value: '2'
            }
            // {
            //   label: '财务系统',
            //   value: '财务系统'
            // }
          ],
          value: '1'
        },
        {
          label: '',
          type: 'input',
          key: 'name',
          value: '',
          placeholder: '请输入名称'
        }
      ],
      tableRLoading: false,
      tableRData: [],
      dataSourceOption: [],
      tableLLoading: false,
      tableLData: [],
      tableLColumns: [
        {
          title: '项目编码',
          dataIndex: 'hospitalItemCode'
        },
        {
          title: '项目名称',
          dataIndex: 'hospitalItemName'
        },
        {
          title: '数据来源',
          dataIndex: 'hospitalItemSource'
        }
      ],
      bSearchVal: '',
      tableBtmColumns: [
        {
          title: '医院项目名称',
          dataIndex: 'hospitalItemName'
        },
        {
          title: '医院项目编码',
          dataIndex: 'hospitalItemCode'
        },
        {
          title: '数据来源',
          dataIndex: 'hospitalItemSource'
        },
        {
          title: '系统项目编码',
          dataIndex: 'systemItemCode'
        },
        {
          title: '系统项目名称',
          dataIndex: 'systemItemName'
        },
        {
          title: '数据来源',
          dataIndex: 'systemItemSource'
        },
        {
          title: '操作',
          dataIndex: 'caozuo',
          type: 'otherTag',
          width: 120
        }
      ],
      tableRColumns: [
        {
          title: '项目编码',
          dataIndex: 'systemItemCode'
        },
        {
          title: '项目名称',
          dataIndex: 'systemItemName'
        },
        {
          title: '数据来源',
          dataIndex: 'systemItemSource'
        }
      ],
      tableBtmLoading: false,
      tableBtmData: [],
      totalBtm: 0,
      pageBtmSize: 10,
      currentBtmPage: 1,
      tableColumns: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      totalR: 0,
      currentRPage: 1,
      pageRSize: 10,
      tableLoading: false,
      tableData: [],
      newCondition: {},
      list: [],
      newRCondition: {},
      newBtmCondition: {},
      leftSelections: [],
      rightSelections: [],
      gxLoading: false
    }
  },
  methods: {
    handleSystermSelection([selection, row]) {
      this.$refs.systermRef.tableSelect(selection, row)
      if (selection.length === 0) {
        // 判断selection是否有值存在
        this.rightSelections = []
        return
      }
      if (row) {
        this.rightSelections = [row]
      }
    },
    handleSelection(row) {
      this.leftSelections = row
    },
    handleComparisonSearch(value) {
      this.newBtmCondition = value
      this.getComparisonData()
    },
    handleComparisonReset(val) {
      this.handleComparisonSearch(val)
    },
    handleSystermSearch(value) {
      this.newRCondition = value
      this.getSystermData()
    },
    handleSystermReset(val) {
      this.handleSystermSearch(val)
    },
    // 查询
    handleHospitalSearch(value) {
      this.newCondition = value
      this.getHospitalData()
    },
    handleHospitalReset(val) {
      this.handleHospitalSearch(val)
    },
    handleUpdataData() {
      // 更新数据
      this.gxLoading = true
      updateData({
        source: this.$refs.gxForm.getParms()?.dataSource
      })
        .then(res => {
          this.gxLoading = false
          if (res.code === 200) {
            this.getHospitalData()
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(() => {
          this.gxLoading = false
        })
    },
    getHospitalData() {
      const params = {
        source: this.newCondition?.dataSource,
        itemName: this.newCondition?.name,
        pageSize: this.pageSize,
        pageNum: this.currentPage
      }
      this.tableLLoading = true
      listHospitalItemPage(params)
        .then(res => {
          this.tableLLoading = false
          if (res.code === 200) {
            this.tableLData = res.data.records
            this.total = res.data.total
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(() => {
          this.tableLLoading = false
        })
    },
    getSystermData() {
      const params = {
        itemName: this.newRCondition?.name,
        pageNum: this.currentRPage,
        pageSize: this.pageRSize
      }
      this.tableRLoading = true
      listSystemItemPage(params)
        .then(res => {
          this.tableRLoading = false
          if (res.code === 200) {
            this.tableRData = res.data.records
            this.totalR = res.data.total
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(() => {
          this.tableRLoading = false
        })
    },

    getComparisonData() {
      const params = {
        itemName: this.newBtmCondition?.name,
        pageNum: this.currentBtmPage,
        pageSize: this.pageBtmSize
      }
      this.tableBtmLoading = true
      listItemContrastPage(params)
        .then(res => {
          this.tableBtmLoading = false
          if (res.code === 200) {
            this.tableBtmData = res.data.records
            this.totalBtm = res.data.total
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(() => {
          this.tableBtmLoading = false
        })
    },

    handleRevoke(row) {
      this.$ckConfirm({
        content: '撤销即解除对照关系，是否继续？',
        title: '提示',
        okFn: res => {
          withdrawContrast({
            id: row.id
          }).then(res => {
            if (res.code === 200) {
              this.getComparisonData()
              this.getHospitalData()
              this.getSystermData()
              this.$message.success(res.message)
            } else {
              this.$message.error(res.message)
            }
          })
        },
        cancelFn: res => {
          console.log('取消')
        }
      })
    },
    handleDealExcel() {
      // 确认对照
      if (this.leftSelections.length === 0) {
        this.$message.warning('请选择医院数据')
        return
      }
      if (this.rightSelections.length === 0) {
        this.$message.warning('请选择系统数据')
        return
      }
      const param = {
        list: this.leftSelections,
        systemItemCode: this.rightSelections[0]?.systemItemCode,
        systemItemName: this.rightSelections[0]?.systemItemName,
        systemItemSource: this.rightSelections[0]?.systemItemSource
      }
      this.qrLoading = true
      confirmControl(param).then(res => {
        this.qrLoading = false
        if (res.code === 200) {
          this.getComparisonData()
          this.getHospitalData()
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    pageSystermChange(payload) {
      this.currentRPage = payload.current
      this.pageRSize = payload.pageSize
      this.getSystermData()
    },

    handleYyPagination(payload) {
      this.currentPage = payload.current
      this.pageSize = payload.pageSize
      this.getHospitalData()
    },
    pageChange(payload) {
      this.currentBtmPage = payload.current
      this.pageBtmSize = payload.pageSize
      this.getComparisonData()
    }
  }
}
</script>

<style lang="less" scoped>
.wraper {
  height: 100%;
  display: grid;
  grid-template-rows: 1fr 360px;
  background: transparent !important;
  gap: 10px 0px;
  overflow: hidden;
  padding: 0px !important;
  // 全选框隐藏
  .systerm-box/deep/.el-table__header .el-checkbox {
    display: none !important;
  }

  .top-box,
  .bottom-box {
    padding: 8px;
    background: #fff;
    border-radius: 2px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .top-box {
    display: grid;
    grid-template-columns: 1fr 160px 1fr;
    .left-box,
    .right-box {
      border: 1px solid #e7ecf8;
      padding: 5px 10px 10px;
      box-sizing: border-box;
      overflow: hidden;
    }
    .middle-box {
      display: flex;
      justify-content: center;
      align-items: center;
      // border: 1px solid red;
      .m-btn {
        display: grid;
        // grid-template-rows: repeat(5, auto);
        gap: 15px 0px;
        // border: 1px solid red;
      }
    }
  }
  .card-box {
    display: flex;
    flex-direction: column;
    .undline {
      height: 30px;
      display: flex;
      align-items: center;
      margin-bottom: 5px;
      font-weight: 700;
      &::before {
        content: '';
        height: 15px;
        border-right: 2px solid #217dfa;
        margin-right: 10px;
      }
    }
    .search-box {
      display: flex;
      margin-bottom: 15px;
    }
    .table-box {
      flex: 1;
      display: flex;
      overflow: hidden;
    }
  }
}
</style>
